<div id="announcement">
    <h3 class="underline">About</h3>
    <p>
    <span class="boldText">O My Friends</span> aims to visualise a personal social network by analysing different kinds of communications on Facebook. 
	It is assuming that the frequency of communication represents the intimacy of a relationship. 
	It shows the user node at the center and his/her friend nodes around it. 
    </p>
    <h3 class="underline">What Data?</h3>
    <p>
    Target data consists of four types of communications, which are message, post, comment and the like. 
	Each data type has its own weight from 0 to 5.
    </p>
    
    <h3 class="underline">How To Use?</h3>
    <p>
    If you are looking at this message, the app has already started to fetch data from Facebook. 
	(If not, click on the "Connect with Facebook" button above.) 
	Please be patient. It might take several minutes if you have about 80 friends or more. 
	While it is working, you can play with some buttons and sliders. 
	At the top right of the screen, there are two buttons, "Friends Table" and " Settings". 
    </p>
	<div>
	   <img src="./images/screenshot_buttons.png"/>
	</div> 
    <ul>
        <li>
            <span class="boldText">Friends Table</span> shows a table where there is a friend list and all your friends' data. 
			The number will change when users change weighting rules using one of sliders 
			or users check in/out datatype checkboxes. 
			If you click on one of the rows in the table or nodes in the graph, the app will take you to the Facebook friendship page where you can find all communications between you and the friend. 
        </li>
        <li>
            <span class="boldText">Settings</span> shows a panel where there are some checkboxes and sliders.<br/>
            <div class="center"><img src="./images/screenshot_settings_DataTypes.png" width="300px"/></div>
            <ul>
                <li><span class="boldText">Data Types</span> checkboxes: you can exclude or include a certain data type by toggling a checkbox.</li> 
                <li><span class="boldText">Filtering</span> slider: you can filter out some friends with less than a certain number of points. It may be useful to see who is left at the end.</li> 
                <li><span class="boldText">Weighting</span> sliders: each slider represents a weight for one of the data types. If you change one of these, it will affect the graph and also the friend table.</li>
            </ul>
        </li>
    </ul>
    <div>
       <img src="./images/button_about.png"/>
    </div> 
	<ul>
		<li>
		  The <span class="boldText">About button</span> shows a dialogue window which you're looking at right now.
		</li>
	</ul>
    <div>
       <img src="./images/button_refresh.png"/>
    </div> 
    <ul>
    	<li>
            <span class="boldText">Refresh button</span> helps you when something goes wrong with the graph. It will clear and re-draw the graph.
		</li>
    </ul>
    <h3 class="underline">Compatibility</h3>
    <p>
	    This application was developed on <span class="boldText">Windows 7 (64bit)</span> 
		with <span class="boldText">Firefox 3.6.13</span>, and works on:
		<ul>
			<li><span class="boldText">Firefox 3.6.13</span></li>
			<li><span class="boldText">Firefox 4.0 (RC)</span></li>
			<li><span class="boldText">Google Chrome 9.0</span></li>
			<li><span class="boldText">Internet Explorer 8.0</span></li>
			<li><span class="boldText">Internet Explorer 9.0</span></li>
		</ul>
	    If it doesn't work on one of these browsers, please check if <span class="boldText">Java</span> is installed on the machine and <span class="boldText">Javascript</span> is enabled.<br/>
		<br/>
        Unfortunately, this app does NOT work properly on:
        <ul>
            <li><span class="boldText">Safari</span>. Graph covers up all other things.</li>
            <li><span class="boldText">Opera</span>. Graph doesn't show up while you can see the friends table.</li>
        </ul>
    </p>
    <h3 class="underline">Sourcecode</h3>
    <p>
        This is an open source project. The sourcecode can be found in here.<br/>http://code.google.com/p/omyfriends/
    </p>
	<p>
	    I hope you will have fun.
	    <br/><br/>
	    - Minkyu (minkyu.shim@gmail.com)
	    <br/><br/>
	    15 January 2011, Recently, I found that this app is not working as it is expected on IE9 preview version.<br/>	
		16 March 2011, now IE9 has been officially released with the bug fixed. So, the app works on IE9 9.0 now. <br/>
		16 March 2011, Safari browsers are not supporting the "iFrame Shim" tweak which is a solution to the z-index problem with java applets<br/>	
	</p>
 
</div>